<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/gou.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/new_file.css" />
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="gou_bar">
            <div class="inner">
                <a href="index.php"><img src="img/logo.png" /></a>
                <ul class="bar_ul">
                    <li>我的购物车</li>
                    <li>确认订单信息</li>
                    <li>等待付款</li>
                    <li>订单执行</li>
                </ul>
            </div>
        </div>

        <div class="shopping">
            <h4>保税区</h4>

            <table id="cartTable">
                <thead>
                    <tr>
                        <th>
                            <label><input
                    v-model="ischeckall"
                    class="check-all check"
                    type="checkbox"
                  />&nbsp;全选</label
                >
              </th>
              <th>商品信息</th>
              <th>商品单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item,index) in cartData"
              :key="item.id"
              :i="index"
              :items="item"
              is="trCom"
              @addnum="addnum"
              @reducenum="reducenum"
              @del="del"
              @checkpro="checkpro"
            ></tr>
          </tbody>
        </table>
        <div class="foot" id="foot">
          <label class="fl select-all"
            ><input
              v-model="ischeckall"
              type="checkbox"
              class="check-all check"
            />&nbsp;全选{{ischeckall}}</label
          >
          <a
            @click="delchil()"
            class="fl delete"
            id="deleteAll"
            href="javascript:;"
            >删除</a
          >

          <div class="fr closing">立即购买</div>
          <div class="fr total">
            合计：￥<span id="priceTotal">{{totalprice}}.00</span>
          </div>
          <div class="fr selected" id="selected">
            已选商品<span id="selectedTotal">{{totalNum}}</span>件<span
              class="arrow up"
              >︽</span
            ><span class="arrow down">︾</span>
          </div>
          <div class="selected-view">
            <div id="selectedViewList" class="clearfix"></div>
            <span class="arrow">◆<span>◆</span></span>
          </div>
        </div>
      </div>

      <div class="last">
        <h5 class="last_h5">
          <img src="img/trduty_bg.jpg" />
          个人邮递进口物品清关税收解读
        </h5>
        <div class="last_bot">
          <ul>
            <li class="last_li0">
              个人邮递进境物品须界定为<a class="last_bot_sp1" href=""
                >个人自用</a
              >
            </li>
            <li>
              <span class="last_li1">免征税</span>奶粉线征收跨境税，<span
                class="last_bot_sp2"
                >取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span
              >
            </li>
            <li>
              <span class="last_li2">非个人清关</span
              >奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；
            </li>
            <li>
              <span class="last_li3">被税</span
              >自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。
            </li>
          </ul>
        </div>
      </div>

      <div class="BOTTOM">
        <div class="BB">
          <img src="img/bot_slogan.png" alt="" />
        </div>
      </div>
      <!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
      <div class="BigBottom">
        <div class="Big">
          <div class="Big1">
            <p><a style="color: white" href="#">海淘橙</a></p>
            <p class="Big1a"><a href="#">关于我们</a></p>
            <p class="Big1a"><a href="#">免责声明</a></p>
            <p class="Big1a"><a href="#">联系我们</a></p>
          </div>
          <div class="Big2">
            <p><a style="color: white" href="#">海淘橙</a></p>
            <p class="Big1a"><a href="#">意见/建议</a></p>
            <p class="Big1a"><a href="#">海淘购物</a></p>
            <p class="Big1a"><a href="#">友情链接</a></p>
          </div>
          <div class="Big3">
            <p><a style="color: white" href="#">帮助中心</a></p>
            <p class="Big1a"><a href="#">新手指南</a></p>
            <p class="Big1a"><a href="#">常见问题</a></p>
            <p class="Big1a"><a href="#">正品保证</a></p>
            <p class="Big1a"><a href="#">物流配送</a></p>
          </div>
          <div class="Big4">
            <p><a style="color: white" href="#">资讯频道</a></p>
            <p class="Big1a"><a href="#">海淘咨询</a></p>
            <p class="Big1a"><a href="#">网站公告</a></p>
            <p class="Big1a"><a href="#">网站地图</a></p>
          </div>
          <div class="Big5"></div>
          <div class="Big6"></div>
          <div class="Big7">
            <span class="Big7a">微信订阅号</span>
            <span class="Big7b">扫一扫有惊喜</span>
            <img src="img/emw1.png" alt="" />
          </div>
          <div class="Big7">
            <span class="Big7a">微信订阅号</span>
            <span class="Big7b">扫一扫有惊喜</span>
            <img src="img/emw1.png" alt="" />
          </div>
          <div class="Big8"></div>
          <div class="Big9"></div>
          <div class="Big10">
            <p class="Big10a">关注我们</p>
            <img src="img/xlkjk.png" alt="" />
            <p class="Big10c">邮件订阅</p>
            <input
              class="Big10d"
              type="text"
              placeholder="请输入您的邮箱地址，订阅最新优惠"
            />
            <div class="Big10e">订阅</div>
          </div>
          <div class="Big11"></div>
          <div class="Big12"></div>
          <div class="Big13">
            Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights
            Reserved.粤ICP备14073754号-1
          </div>
        </div>
      </div>

      <!--右侧购物栏-->
      <div class="right_l">
        <div class="regist_wrap">
          <div class="regist"></div>
        </div>
        <div class="regist_wrap2">
          <div class="regist2"></div>
          <p>一键购</p>
        </div>
        <div class="regist_wrap3">
          <div class="regist3"></div>
          <p>购物车</p>
        </div>
        <div class="regist_wrap4">
          <div class="regist4"></div>
        </div>
        <div class="regist_wrap5">
          <div class="regist5"></div>
        </div>
        <div class="regist_wrap6">
          <div class="regist6"></div>
        </div>
        <div class="regist_wrap7">
          <div class="regist7"></div>
        </div>

        <div class="regist_wrap8">
          <div class="regist8"></div>
        </div>
      </div>
    </div>

    <template id="trcom">
      <tr>
        <td class="checkbox">
          <input
            class="check-one check"
            type="checkbox"
            v-model="ischeck"
            @click="getdata"
          />
        </td>
        <td class="goods">
          <img :src="items.imgurl" /><span>{{items.pname}}</span>
        </td>
        <td class="price">{{items.price}}</td>
        <td class="count">
          <span class="reduce" @click="reduceNum(i,items)"
            >{{items.num>1?'-':''}}</span
          ><input class="count-input" type="text" :value="items.num" /><span
            class="add"
            @click="addnum(i)"
            >+</span
          >
        </td>
        <td class="subtotal">{{items.price*items.num}}</td>
        <td class="operation">
          <span @click="del(i)" class="delete">删除</span>
        </td>
      </tr>
    </template>
    <script>
      let cartData = [
        {
          id: 1,
          pname:
            "飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯防漏带手柄（2件装） ",
          imgurl: "img/images/20150708112148lm2t0.jpg",
          price: 5999,
          num: 1,
          ischeck: false,
        },
        {
          id: 2,
          pname: "日本Merries花王新生儿纸尿裤S82 ",
          imgurl: "img/images/201509091748430829.jpg",
          price: 388,
          num: 1,
          ischeck: false,
        },
        {
          id: 3,
          pname: "Sony/索尼 DSC-WX300 ",
          imgurl: "img/images/3.jpg",
          price: 148,
          num: 1,
          ischeck: false,
        },
        {
          id: 4,
          pname:
            "韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装多款颜色图案随机发货 ",
          imgurl: "img/images/201608081427026196.jpg",
          price: 640,
          num: 1,
          ischeck: false,
        },
      ];
      //数组
      let trCom = {
        props: ["items", "i"],
        template: "#trcom",
        data() {
          return {
            ischeck: this.items.ischeck,
          };
        },
        //全选
        watch: {
          "items.ischeck"(newval) {
            // console.log("??", newval);
            this.ischeck = newval;
          },
          ischeck(newval) {
            //双向绑定，会更改数据 监听数据变化，获取最新的数据
            console.log(newval);
            this.$emit("checkpro", { i: this.i, ischeck: newval });
          },
        },
        methods: {
          reduceNum(i, items) {
            console.log(items);
            if (items.num > 1) {
              this.$emit("reducenum", i);
            }
          },
          addnum(i) {
            console.log(i);
            this.$emit("addnum", i);
          },
          del(i) {
            console.log(i);
            this.$emit("del", i);
          },
          getdata() {
            console.log(this.items);
          },
          // checkpro(i) {
          //   // console.log(items);
          //   setTimeout(() => {
          //     // console.log(this.ischeck);
          //     // this.$emit("checkpro", { i, ischeck: this.ischeck });
          //   });
          // },
        },
      };

      new Vue({
        el: "#app",
        components: {
          trCom,
        },
        data: {
          cartData,
        },
        methods: {
          addnum(i) {
            this.cartData[i].num++;
          },
          reducenum(i) {
            this.cartData[i].num--;
          },
          del(i) {
            this.cartData.splice(i, 1);
          },
          checkpro(obj) {
            // console.log("??", obj);
            this.cartData[obj.i].ischeck = obj.ischeck;
          },
          //全删除
          delchil() {
            let res = this.cartData.filter((items) => !items.ischeck);
            this.cartData = res;
          },
        },
        computed: {
          ischeckall: {
            // return this.cartData.every((item) => item.ischeck);
            get() {
              //控制小选框
              return this.cartData.every((items) => items.ischeck);
            },
            set(newval) {
              //控制全选框
              console.log(newval);
              this.cartData.forEach((items) => {
                items.ischeck = newval;
              });
            },
          },
          //合计
          totalNum() {
            let total = 0;
            this.cartData.forEach((items) => {
              if (items.ischeck) {
                total += items.num;
              }
            });
            return total;
          },
          totalprice() {
            let total = 0;
            this.cartData.forEach((items) => {
              if (items.ischeck) {
                total += items.price * items.num;
              }
            });
            return total;
          },
        },
      });
    </script>
  </body>
</html>